<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/main.jsp" %>
     <section class="vbox animated fadeInUp">
         <section class="scrollable">
             <div class="m-t-n-xxs item pos-rlt">
                 <div class="top text-right">
             <span class="musicbar animate bg-success bg-empty inline m-r-lg m-t" style="width:25px;height:30px">
               <span class="bar1 a3 lter"></span>
               <span class="bar2 a5 lt"></span>
               <span class="bar3 a1 bg"></span>
               <span class="bar4 a4 dk"></span>
               <span class="bar5 a2 dker"></span>
             </span>
                 </div>
                 <div class="bottom gd bg-info wrapper-lg">
                     <span class="pull-right text-sm">${LISTEN_MUSIC_ITEM.grank } <br>Followers</span>
                     <span class="h2 font-thin">${LISTEN_MUSIC_ITEM.author }</span>
                 </div>
                 <img class="img-full" style="max-height: 400px" src="${V_PATH}${LISTEN_MUSIC_ITEM.imgUri }" alt="...">
             </div>
             <ul class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto">
             	 <c:if test="${!empty LISTEN_MUSIC_ITEMS}">
             	 	<c:forEach var="music" items="${LISTEN_MUSIC_ITEMS }">
             	 		<li class="list-group-item">
		                     <div class="pull-right m-l">
		                         <a href="JavaScript:;"  onclick="addMusic('${music.id}','${music.musicUri}','${music.name }','${music.author }')"><i class="icon-plus"></i></a>
		                     </div>
		                     <a href="javascript:;"  onclick="playMusic('${music.id}','${music.musicUri}','${music.name }','${music.author }')"  class="m-r-sm pull-left">
		                         <i class="icon-control-play text"></i>
		                         <i class="icon-control-pause text-active"></i>
		                     </a>
		                     <div class="clear text-ellipsis">
		                         <span>${music.name } by ${music.author }</span>
		                     </div>
		                 </li>
             	 	</c:forEach>
             	 </c:if>
             </ul>
         </section>
     </section>
 